import React, { forwardRef, memo, useEffect, useImperativeHandle, useState } from "react";
import { Table } from "antd";
import request from "@/utils/request";
import { ColumnsType } from "antd/es/table";
import { Key, TableRowSelection } from "antd/es/table/interface";
interface CurrentProps {
    columns: ColumnsType<BaselistItem>;
    api: string
    values?: any;
    selectRowStatus?: boolean//是否要打开选择框
    rowSelection?: TableRowSelection<BaselistItem>
    getList?: (data: BaseList) => void
    style?: React.CSSProperties
    initSelectedRowKeys?: React.Key[]//默认选中的list
    onrowSelectionChange?: (values: React.Key[]) => void
    scroll?: { x?: string | number | true, y?: string | number }
    initApiFlag?: boolean //默认第一次请求接口
    setResData?: (data: BaseList<BaselistItem>) => BaseList<BaselistItem>
}

//通用的table
const DefaultTable = forwardRef((props: CurrentProps, ref) => {
    const [pageNum, setpageNum] = useState(1)
    const [pageSize, setpageSize] = useState(10)
    const [total, settotal] = useState(0)
    const [selectedRowKeys, setselectedRowKeys] = useState<Key[]>([])//选中的值
    const [data, setdata] = useState<BaselistItem[]>([])
    useImperativeHandle(ref, () => {
        return {
            pageSize,
            pageNum,
            selectedRowKeys,
            getList,
            getSearchList
        }
    })

    //获取list
    const getList = async (pageNum: number = 1, pageSize: number = 10, values?: any) => {
        let res = await request.post<BaseList>(props.api, { ...props.values, ...values, pageNum, pageSize });
        res.data = props.setResData ? props.setResData(res.data) : res.data
        res.data.list.map((item => {
            item.pageNum = res.data.pageNum
            item.pageSize = res.data.pageSize
        }))
        setpageNum(res.data.pageNum)
        setpageSize(res.data.pageSize)
        settotal(res.data.totalSize)
        setdata(res.data.list)
        //请求清空选择
        setselectedRowKeys([])
        props.getList && props.getList(res.data)
    }

    //根据参数获取list
    const getSearchList = async (values?: any) => {
        getList(1, 10, values)
    }
    useEffect(() => {
        if (props.initSelectedRowKeys) {
            setselectedRowKeys(props.initSelectedRowKeys)
        }
    }, [props.initSelectedRowKeys])
    return (
        <Table columns={props.columns}
            style={props.style}
            dataSource={data}
            rowKey={(record: BaselistItem) => record.id}
            rowSelection={props.selectRowStatus ? {
                selectedRowKeys: selectedRowKeys,
                onChange: (selectedRowKeys) => {
                    props.onrowSelectionChange && props.onrowSelectionChange(selectedRowKeys)
                    setselectedRowKeys(selectedRowKeys)
                },
                ...props.rowSelection
            } : undefined}
            scroll={props.scroll}
            pagination={{
                pageSize: pageSize,
                current: pageNum,
                total: total,
                showTotal: (total) => `共${total}条数据`,
                pageSizeOptions: ["10", "20", "30", "50"],
                onChange: (page, pageSize) => {
                    getList(page, pageSize)
                }
            }}
        ></Table>
    )
})

export default memo(DefaultTable);